<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active" active-color="#e71a2e" inactive-color="#999" >
      <router-link to="/">
        <van-tabbar-item >
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon1.active : icon1.inactive" />
          </template>
        </van-tabbar-item>
      </router-link>
      <router-link to="/find">
        <van-tabbar-item >
          <span>找药</span>
          <template #icon="props">
            <img :src="props.active ? icon2.active : icon2.inactive" />
          </template>
        </van-tabbar-item>
      </router-link>
      <router-link to="/card">
        <van-tabbar-item >
            <span>药神卡</span>
            <template #icon="props">
              <img :src="props.active ? icon3.active : icon3.inactive" />
            </template>
          </van-tabbar-item>
      </router-link>
      <router-link to="/cart">
      <van-tabbar-item class="buttomcart">
            <span class="numicon" v-if="totalCount>0">{{totalCount}}</span>
            <span>购物车</span>
            <template #icon="props">
              <img :src="props.active ? icon4.active : icon4.inactive" />
            </template>
          </van-tabbar-item>
      </router-link>
      <router-link to="/mine">
      <van-tabbar-item >
            <span>我的</span>
            <template #icon="props">
              <img :src="props.active ? icon5.active : icon5.inactive" />
            </template>
          </van-tabbar-item>
      </router-link>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon1: {
        active: "",
        inactive: "",
      },
      icon2:{
        active:"",
        inactive:""
      },
      icon3:{
        active:"",
        inactive:""
      },
      icon4:{
        active:"",
        inactive:""
      },
      icon5:{
        active:"",
        inactive:""
      }
    };
  },
  computed: {
    totalCount() {//店铺的选择控制全选
      return this.$store.state.pjcart.countQuantity;
    },
  },
  created () {
    if(this.$route.path=='/'){
      this.active=0;
    }else if(this.$route.path=='/find'){
      this.active=1;
    }else if(this.$route.path=='/card'){
      this.active=2;
    }else if(this.$route.path=='/cart'){
      this.active=3;
    }else if(this.$route.path=='/mine'){
      this.active=4;
    };
  },
  updated () {
    if(this.$route.path=='/'){
      this.active=0;
    }else if(this.$route.path=='/find'){
      this.active=1;
    }else if(this.$route.path=='/card'){
      this.active=2;
    }else if(this.$route.path=='/cart'){
      this.active=3;
    }else if(this.$route.path=='/mine'){
      this.active=4;
    };
  }
};
</script>

<style lang="less" scoped>
@import url("../assets/less/pjfooternav.less");
</style>

